<template>
	<div class="UserMessage">
		<div class="div1-UserMessage">
			<divideLines direction="horizontal" />
		</div>
		<div class="div2-UserMessage">
			<el-avatar shape="square" size="large" :src="userData.user.avatarPath" />
		</div>
		<div class="div3-UserMessage">
			<el-tooltip class="box-item" effect="dark" :content="userData.Text[userData.online]" placement="left">
				<el-tag v-if="userData.online == 0" effect="dark" type="danger">
					<el-icon>
						<Link />
					</el-icon>
				</el-tag>
				<el-tag v-else-if="userData.online == 1" effect="dark" type="success">
					<el-icon>
						<CircleCheck />
					</el-icon>
				</el-tag>
				<el-tag v-else-if="userData.online == 2" effect="dark" type="info">
					<el-icon>
						<Loading />
					</el-icon>
				</el-tag>
				<el-tag v-else-if="userData.online == 3" effect="dark" type="warning">
					<el-icon>
						<Warning />
					</el-icon>
				</el-tag>
			</el-tooltip>
		</div>
		<div class="div4-UserMessage">
			<el-text class="mx-1" tag="b" type="success">
				{{ userData.user.nickname }}
			</el-text>
		</div>
		<div class="div5-UserMessage">
			<el-text class="mx-1" tag="b" type="success">
				{{ userData.user.username }}
			</el-text>
		</div>
		<div class="div6-UserMessage">
			<el-button type="info" @click="getTimeHint" size="small" icon="Timer" plain>{{ formattedValue }}</el-button>
		</div>
		<div class="div7-UserMessage">
			<el-button-group class="ml-4">
				<el-button type="primary" size="small" icon="Postcard"
					@click="tabUnitData.addTab('SELFMESSAGE')">信息</el-button>
				<el-button type="primary" size="small" icon="Message"
					@click="tabUnitData.addTab('EMAILLIST')">邮件</el-button>
			</el-button-group>
		</div>
	</div>
	<el-tabs tab-position="left" style="height: 75%" class="demo-tabs">
		<el-tab-pane>
			<template #label>
				<el-icon>
					<UserFilled />
				</el-icon>
				好友
			</template>
			<friendList></friendList>
		</el-tab-pane>
		<el-tab-pane>
			<template #label>
				<el-icon>
					<HomeFilled />
				</el-icon>
				群聊
			</template>
		</el-tab-pane>
		<el-tab-pane>
			<template #label>
				<el-icon>
					<SwitchFilled />
				</el-icon>
				游戏
			</template>
		</el-tab-pane>
		<el-tab-pane>
			<template #label>
				<el-icon>
					<GoodsFilled />
				</el-icon>
				商城
			</template>
		</el-tab-pane>
		<el-tab-pane>
			<template #label>
				<el-icon>
					<Tools />
				</el-icon>
				设置
			</template>
		</el-tab-pane>
	</el-tabs>
</template>

<script setup>

import {
	ref,
	onMounted,
	onBeforeUnmount
} from 'vue';

import { ElMessage } from 'element-plus'

import dayjs from 'dayjs';

import divideLines from "@/element/divideLines.vue";
import friendList from "@/components/friendList.vue"

import useFriend from "@/store/friend.js"
import useUser from "@/store/user.js";
import useTabUnit from "@/store/tabUnit.js"


let userData = useUser();
let friendData = useFriend();
let tabUnitData = useTabUnit();

// 计时程序
const formattedValue = ref(dayjs().format('HH:mm:ss'));
let intervalId;
onMounted(() => {
	intervalId = setInterval(() => {
		formattedValue.value = dayjs().format('HH:mm:ss');
	}, 1000);
});
onBeforeUnmount(() => {
	clearInterval(intervalId);
});

// 获取时间提示
let getTimeHint = () => {
	ElMessage({
		message: `当前时间:${dayjs().format('YYYY年MM月DD日 HH时mm分ss秒')}`,
		type: 'success',
	})
}
</script>

<style>
.UserMessage {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: repeat(12, 1fr);
	grid-column-gap: 0px;
	grid-row-gap: 0px;

	width: 100%;
	height: 20%
}

.div1-UserMessage {
	grid-area: 12 / 2 / 13 / 12;
}

.div2-UserMessage {
	grid-area: 3 / 2 / 10 / 5;

}

.div3-UserMessage {
	grid-area: 1 / 10 / 4 / 14;
	padding: 10px;
}

.div4-UserMessage {
	grid-area: 3 / 5 / 5 / 13;
}

.div5-UserMessage {
	grid-area: 6 / 5 / 8 / 13;
}

.div6-UserMessage {
	grid-area: 10 / 2 / 12 / 6;
	font-size: 15px;
	color: #65c92a;
}

.div7-UserMessage {
	grid-area: 10 / 6 / 12 / 12;
}

.btnFrame {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	grid-template-rows: repeat(5, 1fr);
	grid-column-gap: 0px;
	grid-row-gap: 0px;

	width: 100%;
	height: 5%
}

.div1-btnFrame {
	grid-area: 1 / 2 / 3 / 8;
}

.div2-btnFrame {
	grid-area: 1 / 2 / 6 / 8;
}
</style>